import {Component, Inject, OnInit, Optional} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {HttpClient} from "@angular/common/http";
import {GnForm, GnMessageService} from "geminis-ng";
import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from './panel/index';
import {PanelDescriptor} from "./PanelDescriptor";
import customTranslateModule from './translate/index'
import {MAT_DIALOG_DATA, MatDialog} from "@angular/material/dialog";
import {FormComponent} from "../form/form.component";

@Component({
  selector: 'gn-workflow-manager-model-modeller',
  templateUrl: './modeller.component.html',
  // styles: [':host{ display: flex; flex-direction: column;}']
})
export class ModellerComponent extends GnForm implements OnInit {

  private emptyModel = '<?xml version="1.0" encoding="UTF-8"?>\n' +
    '<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
    '  <bpmn2:process id="Process_1">\n' +
    '  </bpmn2:process>\n' +
    '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
    '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
    '    </bpmndi:BPMNPlane>\n' +
    '  </bpmndi:BPMNDiagram>\n' +
    '</bpmn2:definitions>';

  private modeller: BpmnModeler;
  private readonly modelId: String;

  constructor(route: ActivatedRoute,
              private httpClient: HttpClient,
              @Optional() @Inject(MAT_DIALOG_DATA) private param: any,
              private matDialog: MatDialog,
              private messageService: GnMessageService) {
    super();
    FormComponent.dialog = matDialog;
    FormComponent.httpClient = httpClient;
    this.modelId = param === null ? null : param.id;
  }

  ngOnInit(): void {
    this.modeller = new BpmnModeler({
      additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule,
        customTranslateModule
      ],
      container: '#bpmn-canvas',
      propertiesPanel: {
        parent: '#bpmn-properties-panel'
      },
      moddleExtensions: {
        flowable: PanelDescriptor
      }
    });

    if (this.modelId) {
      this.httpClient.get('/WORKFLOW-SERVICE/models/' + this.modelId + '/bpmn', {responseType: "text"})
        .subscribe((data: string) => {
          this.modeller.importXML(data);
        });
    } else {
      this.modeller.importXML(this.emptyModel);
    }
  }

  save(): void {
    this.modeller.saveXML({format: true}, (err, xml: string) => {
      if (err) {
        this.messageService.error({message: "保存流程错误", error: err});
      } else {
        this.httpClient.put('/WORKFLOW-SERVICE/models/', xml)
          .subscribe((data: any) => {
              this.messageService.success("保存流程成功");
              this.dialog.confirmForm();
            },
            error => {
              this.messageService.error({message: "保存流程错误", error: error});
            }
          )
      }
    });
  }

}

